import { Modal, Space } from "antd";
import { useState } from "react";
import "./index.less";
import { StyledAgree, StyledCancel } from "../button";
interface TermsConditionsModalProps {
  title: string;
  text: any;
  onOk: () => void;
  onCancel: () => void;
  // changeShowModal?: () => void;
  isModalOpen: boolean;
  btnLeftText: string;
  btnRightText: string;
}

const TermsConditionsModal: React.FC<TermsConditionsModalProps> = (props) => {
  const [isAgreeEnabled, setIsAgreeEnabled] = useState(true);

  const handleScroll = (e: any) => {
    const { scrollTop, clientHeight, scrollHeight } = e.target;
    if (scrollTop + clientHeight >= scrollHeight - 10) {
      // 稍微减去一点余量，避免完全精准到底部时才触发
      setIsAgreeEnabled(false);
    } else {
      setIsAgreeEnabled(true);
    }
  };
  return (
    <>
      <Modal
        centered
        width={"80%"}
        className="view-terms-conditions-modal"
        open={props.isModalOpen}
        {...props}
        title={props.title}
        footer={null}
        onCancel={props.onCancel}
      >
        <div className="modal-header">
          <div className="modal-title"></div>
        </div>
        <div className="modal-content" onScroll={handleScroll}>
          <div dangerouslySetInnerHTML={props.text} />
        </div>
        <div className="modal-footer">
          <Space size={"middle"}>
            <StyledCancel onClick={props.onCancel}>
              {props.btnLeftText}
            </StyledCancel>
            <StyledAgree
              size={"middle"}
              type="dashed"
              onClick={props.onOk}
              disabled={isAgreeEnabled}
              // disabled={!isAgreeEnabled}
            >
              {props.btnRightText}
            </StyledAgree>
          </Space>
        </div>
      </Modal>
    </>
  );
};

export default TermsConditionsModal;
